<template>
  <el-row class="infoItem">
    <div v-for="(item, index) in dataList" :key="item + index">
      <!-- menu 0 -->
      <div v-if="item.kind == 0">
        <el-row v-if="item.level == 0">
          <el-col :span="2" class="tit2">
            {{ item.itemName + ":" }}
          </el-col>
          <div v-if="item.children && item.children.length > 0">
            <el-col :span="22">
              <el-row>
                <Item :list="item.children" :isFinish="isFinish"></Item>
              </el-row>
            </el-col>
          </div>
        </el-row>
        <el-row v-else>
          <el-col :span="4" class="tit2">
            {{ item.itemName + ":" }}
          </el-col>
          <div v-if="item.children && item.children.length > 0">
            <el-col :span="20">
              <el-row>
                <Item :list="item.children" :isFinish="isFinish"></Item>
              </el-row>
            </el-col>
          </div>
        </el-row>
      </div>
      <!-- input 1 -->
      <div v-else-if="item.kind == 1">
        <!-- 放空目录位置 -->
        <!--<el-col :span="2" v-if="item.level == 0">&nbsp;</el-col>-->
        <el-col :span="2" class="tit2">
          {{ item.itemName + ":" }}
        </el-col>
        <el-col :span="2">
          <MyAutoComplete v-model="item.indicatorsActVal" :item="item" :isFinish="isFinish"></MyAutoComplete>
          <!--<el-input v-else
                    resize="both"
                    v-model="item.indicatorsActVal"
                    :placeholder="item.itemName"
          ></el-input>-->
        </el-col>
      </div>
      <!-- textarea 2 -->
      <div v-else-if="item.kind == 2">
        <el-col :span="2" v-if="item.level == 0">&nbsp;</el-col>
        <el-col :span="12">
          <el-input
            type="textarea"
            resize="both"
            v-model="item.indicatorsActVal"
            :placeholder="item.itemName"
          ></el-input>
        </el-col>
      </div>
      <!-- radio 3 -->
      <el-col v-else-if="item.kind == 3" :span="24">
        <!--<el-col :span="2" v-if="item.level == 0">&nbsp;</el-col>-->
        <MyRadio v-model="item.indicatorsActVal" :item="item" :isFinish="isFinish"></MyRadio>
      </el-col>
      <!-- selector 4 -->
      <el-col v-else-if="item.kind == 4" :span="24">
        <!--<el-col :span="2" v-if="item.level == 0">&nbsp;</el-col>-->
        <MySelector v-model="item.indicatorsActVal" :item="item" :isFinish="isFinish"></MySelector>
      </el-col>
      <!-- switch btn 5 -->
      <el-col v-else-if="item.kind == 5" :span="24">
        <!--<el-col :span="2" v-if="item.level == 0">&nbsp;</el-col>
        <el-switch v-model="item.defaulted"></el-switch>-->
        <el-form :ref="'form' + item.itemName" :rules="rules">
          <el-form-item :label="item.itemName">
            <el-switch v-model="item.indicatorsActVal"></el-switch>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- datapicker 5 -->
      <el-col v-else-if="item.kind == 6" :span="6">
        <el-form :ref="'form_' + item.itemName" :model="item" label-width="120px" :rules="rules">
          <el-form-item :label="item.itemName">
            <el-date-picker
              v-model="item.indicatorsActVal"
              type="datetime"
              :placeholder="item.itemName"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- checkbox 7 -->
      <el-col v-else-if="item.kind == 7" :span="24">
        <MyCheckBox v-model="item.indicatorsActVal" :item="item" :isFinish="isFinish"></MyCheckBox>
      </el-col>
      <!-- 处方信息 8 -->
      <el-col v-else-if="item.kind == 8" :span="24">
        <Prescription v-model="item.indicatorsActVal" :item="item" :clinicNo="clinicNo" :isFinish="isFinish"></Prescription>
      </el-col>
    </div>
  </el-row>
</template>

<script>
import MyAutoComplete from "./myAutoComplete";
import MySelector from "./mySelector";
import MyRadio from "./myRadio";
import MyCheckBox from "./myCheckBox";
import Prescription from "./prescription";

export default {
  name: "Item",
  components: {
    MyAutoComplete,
    MySelector,
    MyRadio,
    MyCheckBox,
    Prescription
  },
  props: {
    isFinish:{
      type:Boolean,
      default:false
    },
    clinicNo: {
      type: String,
      default: ""
    },
    list: Array
  },
  created() {
    this.dataList = this.list;
  },
  data() {
    return {
      dataList: [],
      rules: {
        indicatorsActVal: [{required: true,message: '字段不能为空', trigger: 'blur'}],
      },
    };
  },
  methods: {}
};
</script>

<style lang="scss">
.infoItem {
  .tit2 {
    text-align: right;
    float: left;
    font-size: 14px;
    color: #999;
    line-height: 40px;
    padding: 0 4px 0 0;
  }
  .el-form-item__label {
    color: #999;
    font-weight: 400;
  }
}
</style>
